<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户日志</title>
    <link rel="icon" type="imgae/png" href="images/logo2.png">
    <script src="js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/costmerLogList.css">
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.4.0/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css2/index.css">
    <link rel="stylesheet" href="css2/progressbar.css">
    <link rel="stylesheet" href="css2/animation.css">
    <script src="js/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="js/costmerLogList.js"></script>
</head>
<style>
    .indexRightContent{
        height: 500px;
        overflow: hidden;
        overflow-y: auto;
    }
    /*滚动条样式*/
    /*滚动条整体样式*/
    .indexRightContent::-webkit-scrollbar {
        /*高宽分别对应横竖滚动条的尺寸*/
        width: 5px;
        height: 5px;
    }
    /*滚动条里面小方块*/
    .indexRightContent::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        /*background: #e5dfff;*/
        background: #2060c3;

    }
    /*滚动条里面轨道*/
    .indexRightContent::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }
    .stuName{
        display: inline-block;
        width: 127px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>
<style>
    .indexClass {
        position: relative;
        padding: 15px 20px;
        margin-bottom: 25px;
        border: 1px solid #E7ECF0;
        border-radius: 10px;
        background: #FFFFFF;
        box-shadow: 0 3px #d7e4ed;
    }

    .className {
        display: inline-block;
        margin-bottom: 15px;
        font-size: 20px;
        font-weight: bold;
        color: #052D49;
    }

    .classDate {
        display: inline-block;
        margin-left: 20px;
        font-size: 14px;
        color: #A1ADB5;
    }

    .classItem {
        display: inline-block;
        min-width: 150px;
        font-weight: bold;
    }

    .classItemTitle {
        display: inline-block;
        font-size: 16px;
        color: #052D49;
    }

    .classItemContent {
        display: inline-block;
        font-size: 14px;
        color: #4F687A;
    }

    .classPercent {
        display: inline-block;
        position: relative;
        top: -4px;
        margin-left: 10px;
        height: 26px;
        font-size: 16px;
        font-weight: bold;
        color: rgb(43,194,83);
    }

    .classStart {
        position: absolute;
        top: 30px;
        right: 20px;
        width: 100px;
        height: 40px;
        font-size: 16px;
        font-weight: bold;
    }

</style><style>
    .quizContainer {
        position: relative;
        background: white;
        padding: 15px;
        margin-bottom: 25px;
        border-radius: 5px;
        box-shadow: 0 3px #d7e4ed;
    }

    .quizName {
        font-weight: bold;
        margin-bottom: 10px;
    }

    .quizDate {
        font-size: 14px;
        color: #4F687A;
    }

    .quizState {
        position: absolute;
        right: 50%;
        top: 50%;
        transform: translateY(-50%);
    }

    .quizScore {
        position: absolute;
        width: 150px;
        line-height: 35px;
        right: 20%;
        top: 50%;
        transform: translateY(-50%);
    }

    .quizScore > span, .quizScore > strong {
        vertical-align: middle;
    }

    .quiz-btn {
        position: absolute;
        right: 5%;
        top: 25%;
        width: 100px;
        height: 40px;
        font-size: 16px;
    }

    .quiz-anchor {
        position: absolute;
        top: -200px;
    }

    .load-more {
        position: relative;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 1.2em;
        color: #4F687A;
        background: rgba(167, 195, 215, 1);
    }

    .load-more:hover, .load-more:hover:before {
        cursor: pointer;
        opacity: 0.7;
        color: white;
        border-top-color: white;
    }

    .load-more:before {
        content: '';
        display: inline-block;
        position: relative;
        margin: 0 8px;
        top: 10px;
        border: 10px solid transparent;
        border-top: 10px solid #4F687A;
    }

</style>
<style>
    /* --------------------------------

Primary style

-------------------------------- */
    /**, *::after, *::before {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
    }*/

    /*img {
      max-width: 100%;
    }*/

    .timeTag{
        font-size: 12px;
        margin: 25px 10px;
        display: inline-block;
        float: right;
        color: #e4e4e4;
    }

    .resultImg{
        height: 250px;
        margin: 10px auto;
        border-radius: 10px;
        border: 1px black solid;
        padding: 1px;
        cursor: pointer;
    }

    .add_more{
        width: 90%;
        margin: 50px auto 10px;
        text-align: center;
        cursor: pointer;
        z-index: 999;
        position: relative;
    }

    .cd-is-hidden {
        visibility: hidden;
    }

    .cd-timeline__container {
        position: relative;
        width: 90%;
        max-width: 1170px;
        margin: 0 auto;
        top: 15px;
    }

    /* this is the vertical line */
    .cd-timeline__container::before {
        content: '';
        position: absolute;
        margin-left: -2px;
        top: -40px;
        height: 120%;
        width: 4px;
        background: #b9cfdf;
    }

    .cd-timeline__block {
        position: relative;
        margin-bottom: 20px;
    }

    /* clearfix */
    .cd-timeline__block:after {

        content: "";
        display: table;
        clear: both;
    }

    .cd-timeline__img {
        position: absolute;
        width: 60px;
        height: 60px;
        left: -30px;
        border-radius: 50%;
        background: #75ce66;
        -webkit-box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
        box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
        /* Force Hardware Acceleration */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .cd-timeline__date {
        display: inline-block;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        opacity: .9;
        color: white;
        font-weight: bold;
        text-align: center;
    }

    /*.cd-timeline__img img {
      display: block;
      width: 24px;
      height: 24px;
      position: relative;
      top: 50%;
      margin-left: -12px;
      margin-top: -12px;
    }*/

    /*.cd-timeline__img.cd-timeline__img--picture {
      background: #75ce66;
    }

    .cd-timeline__img.cd-timeline__img--movie {
      background: #c03b44;
    }

    .cd-timeline__img.cd-timeline__img--location {
      background: #f0ca45;
    }*/


    .cd-timeline__content {
        display: inline-block;
        position: relative;
        margin-left: 60px;
        padding: 1em;
        padding-bottom: 0;
        background: white;
        border-radius: 0.25em;
        -webkit-box-shadow: 0 3px #d7e4ed;
        box-shadow: 0 3px #d7e4ed;
        /* Force Hardware Acceleration */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        width: 88%;
    }

    .cd-timeline__content:after {
        /* clearfix */
        content: "";
        display: table;
        clear: both;
    }

    .cd-timeline__content::before {
        /* triangle next to content block */
        content: '';
        position: absolute;
        top: 16px;
        right: 100%;
        height: 0;
        width: 0;
        border: 8px solid transparent;
        border-right: 15px solid white;
    }

    /*.cd-timeline__content::before {
      top: 24px;
      left: 100%;
      border-color: transparent;
      border-left-color: white;
    }*/

    .cd-timeline__say {
        color: #303e49;
        font-size: 0.8em;
        font-weight: bold;
    }

    .cd-timeline__say.teacher {
        color: #F96854;
    }
    .cd-timeline__say.parent {
        color: #0d75bf;
    }
    .cd-timeline__say.self {
        color: #4aad38;
    }



    .cd-timeline__content p,
    .cd-timeline__read-more,
    .cd-timeline__date {
        font-size: 1rem;
    }

    .cd-timeline__content p {
        margin: 0.5em 0;
        line-height: 1.6;
        margin-bottom: 20px;
        color: #475c6c;
    }

    .cd-timeline__read-more,
    .cd-timeline__date {
        display: inline-block;
    }

    .cd-timeline__read-more {
        float: right;
        padding: .8em 1em;
        background: #acb7c0;
        color: white;
        border-radius: 0.25em;
    }

    .cd-timeline__read-more:hover {
        background-color: #bac4cb;
    }



    /*@media only screen and (min-width: 768px) {
      .cd-timeline__content h2 {
        font-size: 2rem;
      }
      .cd-timeline__content p {
        font-size: 1.6rem;
      }
      .cd-timeline__read-more,
      .cd-timeline__date {
        font-size: 1.4rem;
      }
    }*/

    @media only screen and (min-width: 1170px) {


        .cd-timeline__read-more {
            float: left;
        }

        /*.cd-timeline__block:nth-child(even) .cd-timeline__content {
          float: right;
        }
        .cd-timeline__block:nth-child(even) .cd-timeline__content::before {
          top: 24px;
          left: auto;
          right: 100%;
          border-color: transparent;
          border-right-color: white;
        }
        .cd-timeline__block:nth-child(even) .cd-timeline__read-more {
          float: right;
        }
        .cd-timeline__block:nth-child(even) .cd-timeline__date {
          left: auto;
          right: 122%;
          text-align: right;
        }*/
        .cd-timeline__content.cd-timeline__content--bounce-in {
            visibility: visible;
            -webkit-animation: cd-bounce-2 0.6s;
            animation: cd-bounce-2 0.6s;
        }
    }

    @media only screen and (min-width: 1170px) {
        /* inverse bounce effect on even content blocks */
        .cd-timeline__block:nth-child(even) .cd-timeline__content.cd-timeline__content--bounce-in {
            -webkit-animation: cd-bounce-2-inverse 0.6s;
            animation: cd-bounce-2-inverse 0.6s;
        }
    }

    @-webkit-keyframes cd-bounce-2 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
        }
        60% {
            opacity: 1;
            -webkit-transform: translateX(20px);
            transform: translateX(20px);
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }

    @keyframes cd-bounce-2 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
        }
        60% {
            opacity: 1;
            -webkit-transform: translateX(20px);
            transform: translateX(20px);
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }

    @-webkit-keyframes cd-bounce-2-inverse {
        0% {
            opacity: 0;
            -webkit-transform: translateX(100px);
            transform: translateX(100px);
        }
        60% {
            opacity: 1;
            -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }

    @keyframes cd-bounce-2-inverse {
        0% {
            opacity: 0;
            -webkit-transform: translateX(100px);
            transform: translateX(100px);
        }
        60% {
            opacity: 1;
            -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }


    @media only screen and (min-width: 1170px) {

        .cd-timeline__img.cd-timeline__img--bounce-in {
            visibility: visible;
            -webkit-animation: cd-bounce-1 0.6s;
            animation: cd-bounce-1 0.6s;
        }
    }

    @-webkit-keyframes cd-bounce-1 {
        0% {
            opacity: 0;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
        }
        60% {
            opacity: 1;
            -webkit-transform: scale(1.2);
            transform: scale(1.2);
        }
        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    @keyframes cd-bounce-1 {
        0% {
            opacity: 0;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
        }
        60% {
            opacity: 1;
            -webkit-transform: scale(1.2);
            transform: scale(1.2);
        }
        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    /* demo style */
    .cd-nugget-info {
        text-align: center;
        position: absolute;
        width: 100%;
        height: 50px;
        line-height: 50px;
        top: 0;
        left: 0;
    }
    .cd-nugget-info a {
        position: relative;
        font-size: 14px;
        color: #718ca1;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }
    .cd-nugget-info a:hover {
        opacity: .8;
    }
    .cd-nugget-info span {
        vertical-align: middle;
        display: inline-block;
    }
    .cd-nugget-info span svg {
        display: block;
    }
    .cd-nugget-info .cd-nugget-info-arrow {
        fill: #718ca1;
    }

</style>
<body>
<div class="indexRightContent" id="customerLog"><!----> <!---->
    <section class="cd-timeline js-cd-timeline">
        <ul id="images" style="display: none;"><!----><!----><!----><!----><!----></ul>
        <div class="cd-timeline__container">
            <div class="cd-timeline__block js-cd-block" v-for="mes in message">
                <div class="cd-timeline__img js-cd-img">
                    <span class="cd-timeline__date">{{mes.customerName}}</span></div>
                <div class="cd-timeline__content js-cd-content">
                    <!---->
                    <div class="cd-timeline__say self">客户日志：{{mes.feedBackId}}</div>
                    <p><span style="color: red;">{{mes.feedContent}}</span></p>
            </div>
            </div>
        </div>
        <div class="cd-timeline__read-more add_more" id="add_more">加载更多</div>
        <div style="display: none;">
            <ul id="resultImages"></ul></div>
    </section>
</div>
</body>
</html>